// moodows 0.1b by jean-nicolas jolivet (silvertab(at)videotron.ca)
// DESC: an extremely simple window class for mootools
// TODO: make windows resizeable (working on it)
// TODO: make window's design skinnable/more customizable
// TODO: make the whole thing better ;)

var moodows = new Class({
	
	initialize: function(options) {
		this.el = new Element('div');
		this.id = 'moodow_' + new Date().getTime();
		this.el.id = this.id;
		this.el.addClass('moodows_win');
		
		
		//set default options
		this.options = Object.extend({
			width:			250,
			height:			100,
			top:			200,
			left:			150,
			title:			'Moodows!',
			status:			'',
			closable:		true,
			minimize:		true,
			movealbe:       false,
			injectionDiv :  'none',
			closeCallFunc : ''
		}, options || {});
		
		this.el.style.zIndex = 1;
		
		this.el.setStyles({
			width: this.options.width + 'px',
			height: this.options.height + 'px',
			top: this.options.top + 'px',
			left: this.options.left + 'px'
		});
		
		this.innerContent = "<table id='title_" + this.id + "' class='moodows_title'>\
			<tr>\
				<td id='titleText_" + this.id + "'>top</td>\
			</tr>\
		</table>\
		<table id='middle_" + this.id + "'>\
			<tr>\
				<td>\
				<div id='content_" + this.id + "'  class='moodows_body'>content</div>\
				</td>\
			</tr>\
		</table>\
		<table id='status_" + this.id +"' class='moodows_status'>\
			<tr>\
				<td id='statusText_" + this.id + "'>Status Text</td>\
			</tr>\
		</table>";
		
		this.el.innerHTML = this.innerContent;
		
		
		this.el.injectInside(document.body);
		
		this.el.injectInside(document.body);
		this.titleHeight = $('title_' + this.id).getSize().size.y;
		this.statusHeight =$('status_' + this.id).getSize().size.y;
		this.contentHeight = this.options.height - (this.titleHeight + this.statusHeight) - 6;
		
		$('content_' + this.id).setStyle('height', this.contentHeight + 'px');
		
		this.dragOptions = {
			handle: $('title_' + this.id),
			onStart: function() {
				this.el.setStyle('opacity', 0.5);
				this.el.style.zIndex = this.getLastZIndex();
			}.bind(this),
			
			onComplete: function() {
				this.el.setStyle('opacity', 1);
			}.bind(this)
		};
		
		
		//everything is drawn, we can set titles etc..
		this.setTitle(this.options.title);
		this.setStatus(this.options.status);
		
		this.contentDiv = $('content_' + this.id);
		
		if(this.options.closable)
		{
			this.closeButton = new Element('div');
			this.closeButton.addClass('moodows_close');
			this.closeButton.setHTML('<b>x</b>');
			this.closeButton.setStyle('left', this.options.width - 20 + 'px');
			this.closeButton.injectInside(this.el);
		}
		
		if(this.options.minimize)
		{
			this.miniButton = new Element('div');
			this.miniButton.addClass('moodows_minimize');
			this.miniButton.setHTML('<b>_</b>');
			this.miniButton.setStyle('left', this.options.width - 40 + 'px');
			this.miniButton.injectInside(this.el);
		}
		
		this.minimized = false;
		this.el.makeDraggable(this.dragOptions);
		this.el.setStyle('display', 'none');
		this.watchEvents();
		
	},
	
	getLastZIndex: function() {
		var allMoodows = $$('div.moodows_win');
		var zindexArray = [];
		//if its's our first window, leave the zindex to 1...
		if(allMoodows.length <= 0)
		{
			return 1;
		}
		else
		{
			allMoodows.forEach(function(item) {
				zindexArray.push(item.style.zIndex);
			});
			zindexArray.sort(this.sortNumber);
			return zindexArray[zindexArray.length-1].toInt() + 1;
		}
	},
	
	sortNumber: function(a, b) {
		
		return a - b;
	},
	
	setContent: function(content) {
		$('content_' + this.id).setHTML(content);
	},
	
	setTitle: function(content) {
		$('titleText_' + this.id).setHTML(content);
	},
	
	setStatus: function(content) {
		$('statusText_' + this.id).setHTML(content);
	},
	setStyles: function(options){
		this.el.setStyles(options);
	}
	,
	watchEvents: function()
	{
		if(this.options.closable)
		{
			this.closeButton.onclick = function() { 
				if(this.options.closeCallFunc!=''){
					this.callFunc();
				}
				this.hide(); 
				
			}.bind(this);
		}
		
		if(this.options.minimize)
		{
			this.miniButton.onclick = function() {
				this.minimize();
			}.bind(this);
		}
	},
	
	hide: function()
	{
		this.el.setStyle('display', 'none');

	},
	
	show: function()
	{
		this.el.style.zIndex = this.getLastZIndex();
		this.el.setStyle('display', 'block');
	},
	
	minimize: function()
	{
		if(!this.minimized)
		{
			this.contentDiv.oldHeight = this.contentDiv.getSize().size.y;
			this.middleTableOldHeight = $('middle_' + this.id).getSize().size.y;

			this.contentDiv.effect('height').start(0);
			this.el.effect('height').start(48);
			$('middle_' + this.id).effect('height').start(0);
			this.minimized = true;
		}
		else
		{
			this.contentDiv.effect('height').start(this.contentDiv.oldHeight);
			this.el.effect('height').start(this.options.height);
			$('middle_' + this.id).effect('height').start(this.middleTableOldHeight);
			this.minimized = false;
		}
	},
	callFunc :function(){
		alert('a');
		mapCanvas.clear(); 
		mapCanvas2.clear();
		XPoints = new Array(0);
		YPoints = new Array(0);  
		idx = 0 ;
	}
});